<template> 
	<div class="Echarts">
		<div id="main" style="width: 418px;height: 267px;"></div>
	</div>
</template>
  
<script>  
	export default {
		name: 'capital2',
		data() {
			return{
				cockpitData:[]
			}
		}, 
		mounted() {
			this.getList()
			
		},
		methods: {
			async getList(){
				var dt = {
					"params": {
						"normGuid": "a2ff6e48-174b-4ad2-bb43-6d0db17a9e2e",
						"fieldList": [ {
							"key": "area",
							"value": "宁波"
						}, {
							"key": "mapping_code",
							"value": "新材料"
						}]
					}
				};
				var _this = this;
				const aaa = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				let {custom:{result}}={...aaa}
				_this.cockpitData=result.cockpitData
				_this.$nextTick(()=>{
					_this.myEcharts();
				})
			},
			myEcharts() {
				// console.log(this.cockpitData)
				let ytitleData=this.cockpitData.map(item=>{
					return item.lv
				})
				let jeData=this.cockpitData.map(item=>{
					return item.rzje
				})
				let numData=this.cockpitData.map(item=>{
					return item.rzsjnum
				})
				// console.log(ytitleData)
				let myChart = this.$echarts.init(document.getElementById('main'));
				//配置图表
				var option = {
					// backgroundColor: 'rgba(3, 16, 38, 0.71)',
					legend: {
						show: true,
						itemWidth: 10,
						itemHeight:10,
						top:5,
						left:5,
						textStyle: {
						      color: "#DFF8FF",
							  fontSize:14,
						    }
					},
					xAxis: [{
						splitLine: {
							show: false
						},
						type: 'value',
						show: false,
					}],
					grid: {
					        left: '3%',
					        right: '10%',
							top:'15%',
					        bottom: '1%',
							width:'80%',
					        containLabel: true,
							height:'90%'
					    },
					yAxis: [{
						splitLine: {
							show: false
						},
						axisLine: { //y轴
							show: false
						},
						type: 'category',
						axisTick: {
							show: false
						},
						inverse: true,
						data: ytitleData,
						axisLabel: {
							color: '#DFF8FF',
							fontSize: 15,
						}
					}],
					series: [{
						name: '融资金额(亿元)',
						type: 'bar',
						barWidth: 8, // 柱子宽度
						barGap:1,
						label: {
							show: true,
							position: 'right', // 位置
							color: '#C1E2FF',
							fontSize: 15,
							distance: 10, // 距离
							formatter:function(params){
								if(params.dataIndex==0){
									return '暂无'
								}else{
									return params.data
								}
							}
							
						}, // 柱子上方的数值
						itemStyle: {
							barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
							color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
								offset: 0,
								color: '#04CDF4'
							}, {
								offset: 1,
								color: '#2682FF'
							}], false), // 渐变
						},
						data: jeData
					}, {
						name: '融资事件数量(起)',
						type: 'bar',
						barWidth: 8, // 柱子宽度
						label: {
							show: true,
							position: 'right', // 位置
							color: 'rgba(255, 255, 255, 0.9)',
							fontSize: 15,
							distance: 10, // 距离
							formatter: '{c}' // 这里是数据展示的时候显示的数据
						}, // 柱子上方的数值
						itemStyle: {
							barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
							color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
								offset: 0,
								color: '#F5D75F'
							}, {
								offset: 1,
								color: '#F5AF0F'
							}], false), // 渐变
						},
						data: numData
					}]
				};
				myChart.setOption(option);
			}
		}
	}
</script>


<style>

</style>
